import React from 'react';
import { List, InputItem, Picker, TextareaItem, DatePicker } from 'antd-mobile';
import { createForm } from 'rc-form';

import Modal from '../../common/Modal';
import Error from '../../common/Error';

@createForm()
export default class ContactEdit extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      isEdit: props.id !== undefined
    };
  }
  renderError(name) {
    let errors;
    const { getFieldError } = this.props.form;
    return (errors = getFieldError(name)) ? <Error>{errors.join(',')}</Error> : null;
  }

  submit = () => {
    this.props.form.validateFields();
  };

  render() {
    const { isEdit } = this.state;
    const { data } = this.props;
    const { getFieldProps, getFieldError, getFieldDecorator } = this.props.form;
    return (
      <Modal
        title={isEdit ? '编辑联系人' : '添加联系人'}
        rightContent={[
          <span onClick={this.submit} key={1}>
            保存
          </span>
        ]}
        visible={this.props.visible}
        onCannel={this.props.onCannel}
        className="global-list"
      >
        <List>
          {getFieldDecorator('name', {
            initialValue: isEdit ? data.name : undefined,
            rules: [
              {
                required: true,
                message: '姓名必填!'
              }
            ]
          })(<InputItem clear placeholder="必填">
              姓名
          </InputItem>)}
          {this.renderError('name')}
          {getFieldDecorator('sex', {
            initialValue: isEdit ? data.gender : undefined,
            rules: [{}]
          })(<Picker
            key="sex"
            extra="请选择"
            cols={1}
            data={[{ label: '男', value: 1 }, { label: '女', value: 2 }, { label: '保密', value: 0 }]}
            title="性别"
            onOk={e => console.log('ok', e)}
            onDismiss={e => console.log('dismiss', e)}
          >
            <List.Item arrow="horizontal">性别</List.Item>
          </Picker>)}
          {getFieldDecorator('联系人职位', {
            initialValue: isEdit ? data.position : undefined,
            rules: [{}]
          })(<InputItem clear placeholder="请填写">
              联系人职位
          </InputItem>)}
          {getFieldDecorator('联系人角色', {
            initialValue: isEdit ? data.contactRole : undefined,
            rules: [{}]
          })(<Picker
            key="联系人角色"
            extra="请选择"
            cols={1}
            data={[{ label: '男', value: 1 }, { label: '女', value: 2 }, { label: '保密', value: 0 }]}
            title="联系人角色"
            onOk={e => console.log('ok', e)}
            onDismiss={e => console.log('dismiss', e)}
          >
            <List.Item arrow="horizontal">联系人角色</List.Item>
          </Picker>)}
          {getFieldDecorator('手机号码', {
            initialValue: isEdit ? data.mobile : undefined,
            rules: [{}]
          })(<InputItem clear placeholder="请填写">
              手机号码
          </InputItem>)}

          {getFieldDecorator('固定电话', {
            initialValue: isEdit ? data.fixedTelephone : undefined,
            rules: [
              {
                // type:'number'
              }
            ]
          })(<InputItem clear placeholder="请填写">
              固定电话
          </InputItem>)}

          {getFieldDecorator('邮箱', {
            initialValue: isEdit ? data.mail : undefined,
            rules: [{}]
          })(<InputItem clear placeholder="请填写">
              邮箱
          </InputItem>)}

          {getFieldDecorator('QQ', {
            initialValue: isEdit ? data.qq : undefined,
            rules: [{}]
          })(<InputItem clear placeholder="请填写">
              QQ
          </InputItem>)}

          {getFieldDecorator('微信', {
            initialValue: isEdit ? data.weixin : undefined,
            rules: [{}]
          })(<InputItem clear placeholder="请填写">
              微信
          </InputItem>)}

          {getFieldDecorator('爱好', {
            initialValue: isEdit ? data.hobby : undefined,
            rules: [{}]
          })(<InputItem clear placeholder="请填写">
              爱好
          </InputItem>)}

          {getFieldDecorator('birthday', {
            initialValue: isEdit ? data.birthday : undefined,
            rules: [
              {
                validator: (rules, value, callback) => {
                  console.log(value);
                  callback();
                }
              }
            ]
          })(<DatePicker mode="date" title="出生日期" extra="请选择">
            <List.Item arrow="horizontal">出生日期</List.Item>
          </DatePicker>)}

          {getFieldDecorator('remark', {
            initialValue: isEdit ? data.remark : undefined,
            rules: [{}]
          })(<TextareaItem rows={5} count={100} placeholder="请填写" title="备注" />)}
        </List>
      </Modal>
    );
  }
}
